<template>
  <div class="page-wrapper">

    <van-nav-bar @click-left="handleBack">
        <template #left >
          <van-icon name="arrow-left" size="1.5em" color="#000" />
        </template>
        <template #title>
          <div class="search-box" @click="handleSearch">
            <van-icon name="search" size="1.2em" color="#1baeae" />
            <span class="hot-text">百果园</span>
          </div>
        </template>
        <template #right>
          <i class="iconfont icon-message message-icon"></i>
        </template>
    </van-nav-bar>

    <catMain />

  </div>

  


</template>

<script lang="ts">
import { defineComponent } from 'vue'
import router from '../config/router'
import catMain from '../components/cat-main.vue'
export default defineComponent({
  components: {
    catMain
  },
    setup() {
        const handleBack = () => {
            router.back();
        }

        const handleSearch = () => {
          router.push({
            path: '/search'
          })
        }

        return {
          handleBack,
          handleSearch
        }
    },
})
</script>


<style lang="less" scoped>

.page-wrapper {
  height: calc(100% - 1.25rem);
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f1f2f6;
  width: 7.5rem;
  border-radius: .625rem;
  height: .8125rem;
  padding: 0 .25rem;

  .hot-text {
    font-size: .375rem;
    color: #ccc;
    margin-left: .0625rem;
  }

}
.message-icon {
  margin-left: .375rem;
  color: @base-color;
  font-size: .625rem;
}

:deep(.van-nav-bar__title)  {
  max-width: 80%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>